<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!-- 引用开发版 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- v-show条件渲染，本质是使用display:none，布局结构还在 -->
        <h2 v-show="showFlag">欢迎来到{{name}}</h2>
        
        <!-- v-if条件渲染，布局结构不存在了 -->
        <h2 v-if="showFlag">欢迎来到{{name}}</h2>

        <br/><br/>

        <h2>当前num值是: {{num}}</h2>
        <button @click="num++">点我num+1</button>

        <!-- <div v-if="num % 3 === 1">A</div>
        <div v-if="num % 3 === 2">B</div>
        <div v-if="num % 3 === 0">C</div> -->

        <!-- <div v-if="num % 3 === 1">A</div>
        <div v-else-if="num % 3 === 2">B</div>
        <div v-else-if="num % 3 === 0">C</div>
        <div v-else>hhhh</div> -->

        <!-- v-if和template配合使用，v-show不能和template配合使用 -->
        <template v-if="num === 1">
            <h2>你好1</h2>
            <h2>你好2</h2>
            <h2>你好3</h2>
        </template>
        

    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        const vm = new Vue({
            el:'#root',
            data:{
                num:0,
                name:'尚硅谷',
                showFlag:false 
            }
        })
    </script>
</body>
</html